<!DOCTYPE html>
<html>
  <head>
    <title>Policy Creator</title>
    <link href="assets/css/700.css" rel="stylesheet">
<!--    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">-->
      <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <script src="js/jQuery.min.js"></script>
          <script src="js/jquery.validate.min.js"></script>

    <script src="js/jquery.steps.js"></script>


    <style>
      html, body {
      min-height: 100%;
      }
      body, div, form, input, select, textarea, label, p { 
      padding: 0;
      margin: 0;
      outline: none;
      font-family: Roboto, Arial, sans-serif;
      font-size: 14px;
      color: #666;
      line-height: 22px;
      }
      h1 {
      position: absolute;
      margin: 0;
      font-size: 40px;
      color: #fff;
      z-index: 2;
 line-height: 83px;
      }
      textarea {
      width: calc(100% - 12px);
      padding: 5px;
      }
      .testbox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: inherit;
      padding: 20px;
      }
      form {
      width: 100%;
      padding: 20px;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 0 8px #006622; 
      }
      .banner {
      position: relative;
      height: 250px;
      background-image: url("images/Taylor.png");
     // background-size: cover;
     background-repeat: no-repeat;
          background-position: center;


      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      }
      .banner::after {
      content: "";
      background-color: rgba(0, 0, 0, 0.2); 

      position: absolute;
      width: 100%;
      height: 100%;
      }
      input, select, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      }
      input {
      width: calc(100% - 10px);
      padding: 5px;
      }
      input[type="date"] {
      padding: 4px 5px;
      }
      textarea {
      width: calc(100% - 12px);
      padding: 5px;
    }
      .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
      color:  #006622;
      }
      .item input:hover, .item select:hover, .item textarea:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 3px 0  #006622;
      color: #006622;
      }
      .item {
      position: relative;
      margin: 10px 0;
      }
      .item span {
      color: red;
      }
      input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
      .item i, input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #00b33c;
      }
      .item i {
      right: 1%;
      top: 30px;
      z-index: 1;
      }
 .week {
      display:flex;
      justfiy-content:space-between;
      }
      .colums {
      display:flex;
      justify-content:space-between;
      flex-direction:row;
      flex-wrap:wrap;
      }
      .colums div {
      width:48%;
      }
      [type="date"]::-webkit-calendar-picker-indicator {
      right: 1%;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
      }
      input[type=radio], input[type=checkbox]  {
      display: none;
      }
      label.radio {
      position: relative;
  display: inline-block;
      margin: 5px 20px 15px 0;
      cursor: pointer;
      }
      .question span {
      margin-left: 30px;
      }
      .question-answer label {
      display: block;
      }
      label.radio:before {
      content: "";
      position: absolute;
      left: 0;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 2px solid #ccc;
      }
      input[type=radio]:checked + label:before, label.radio:hover:before {
      border: 2px solid  #006622;
      }
      label.radio:after {
      content: "";
      position: absolute;
      top: 6px;
      left: 5px;
      width: 8px;
      height: 4px;
      border: 3px solid  #006622;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      opacity: 0;
      }
      input[type=radio]:checked + label:after {
      opacity: 1;
      }
      .flax {
      display:flex;
      justify-content:space-around;
      }
      .btn-block {
      margin-top: 10px;
      text-align: center;
      }
      button {
      width: 150px;
      padding: 10px;
      border: none;
      border-radius: 5px; 
      background:  #006622;
      font-size: 16px;
      color: #fff;
cursor: pointer;
      }
      button:hover {
      background:  #00b33c;
      }
      @media (min-width: 568px) {
      .name-item, .city-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .name-item input, .name-item div {
      width: calc(50% - 20px);
      }
      .name-item div input {
      width:97%;}
      .name-item div label {
      display:block;
      padding-bottom:5px;
      }
      }
         
 .topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
        
        
        /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */

}
        


/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
        
              ﻿/*
    Common 
*/

.wizard,
.tabcontrol
{
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a,
.tabcontrol a
{
    outline: 0;
}

.wizard ul,
.tabcontrol ul
{
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.wizard ul > li,
.tabcontrol ul > li
{
    display: block;
    padding: 0;
}

/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
    position: absolute;
    left: -999em;
}

.wizard > .content > .title,
.tabcontrol > .content > .title
{
    position: absolute;
    left: -999em;
}



/*
    Wizard
*/

.wizard > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.wizard.vertical > .steps
{
    display: inline;
    float: left;
    width: 30%;
}

.wizard > .steps .number
{
    font-size: 1.429em;
}

.wizard > .steps > ul > li
{
    width: 25%;
}

.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
    float: left;
}

.wizard.vertical > .steps > ul > li
{
    float: none;
    width: 100%;
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
    display: block;
    width: auto;
    margin: 0 0.5em 0.5em;
    padding: 1em 1em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
    background: #2184be;
    color: #fff;
    cursor: default;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
    background: #9dc8e2;
    color: #fff;
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
    background: #ff3111;
    color: #fff;
}

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard.vertical > .content
{
    display: inline;
    float: left;
    margin: 0 2.5% 0.5em 2.5%;
    width: 65%;
}

.wizard > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.wizard > .content > .body ul
{
    list-style: disc !important;
}

.wizard > .content > .body ul > li
{
    display: list-item;
}

.wizard > .content > .body > iframe
{
    border: 0 none;
    width: 100%;
    height: 100%;
}

.wizard > .content > .body input
{
    display: block;
    border: 1px solid #ccc;
}

.wizard > .content > .body input[type="checkbox"]
{
    display: inline-block;
}

.wizard > .content > .body input.error
{
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}

.wizard > .content > .body label
{
    display: inline-block;
    margin-bottom: 0.5em;
}

.wizard > .content > .body label.error
{
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em;
}

.wizard > .actions
{
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard.vertical > .actions
{
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%;
}

.wizard > .actions > ul
{
    display: inline-block;
    text-align: right;
}

.wizard > .actions > ul > li
{
    margin: 0 0.5em;
}

.wizard.vertical > .actions > ul > li
{
    margin: 0 0 0 1em;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
    background: #2184be;
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active
{
    background: #eee;
    color: #aaa;
}

.wizard > .loading
{
}

.wizard > .loading .spinner
{
}



/*
    Tabcontrol
*/

.tabcontrol > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.tabcontrol > .steps > ul
{
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1;
}

.tabcontrol > .steps > ul > li
{
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabcontrol > .steps > ul > li:hover
{
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0;
}

.tabcontrol > .steps > ul > li.current
{
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0;
}

.tabcontrol > .steps > ul > li > a
{
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
}

.tabcontrol > .steps > ul > li > a:hover
{
    text-decoration: none;
}

.tabcontrol > .steps > ul > li.current > a
{
    padding: 15px 30px 10px 30px;
}

.tabcontrol > .content
{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 35em;
    overflow: hidden;
    border-top: 1px solid #bbb;
    padding-top: 20px;
}

.tabcontrol > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.tabcontrol > .content > .body ul
{
    list-style: disc !important;
}

.tabcontrol > .content > .body ul > li
{
    display: list-item;
}
        
        
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
        
        
    </style>
  </head>
  <body>
      
                <!-- Trigger/Open The Modal -->
<button id="myBtn">Register</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
       <p id = "message"><b id = "message2">User Account Registration</b></p>
          <div class="item">
            <label for="username"> User Name<span>*</span></label>
            <input id="username" type="text" name="username" />
          </div>
          <div class="item">
            <label for="password">Password<span>*</span></label>
            <input id="password" type="text" name="password" />
             <button type="submit" href="/" id = "registerButton">Register</button>

          </div>
  </div>

</div>

    <div class="testbox">
      <form>
        <div class="banner">
        <!--  <h1>AutoInsurancePolicyCreatePage</h1> -->
        </div>
        <br/>    
             <div class="topnav">
  <a  href="index.html">Home</a>
  <a class="active" href="/dashboard.html">Dashboard</a>
  <a href="#contact">Contact</a>
  <a href="/login">Login</a>
 <a href="/logout">Logout</a>
          

          

          </div>
          
          
          <br>     
        <fieldset id = "wizard"> 
          <legend></legend>
            
            
            <!--
            <p><b>User Account</b></p>
          <div class="item">
            <label for="username"> User Name<span>*</span></label>
            <input id="username" type="text" name="username" />
          </div>
          <div class="item">
            <label for="password">Password<span>*</span></label>
            <input id="password" type="text" name="password" />
          </div>
-->
            <div id="wizard"> 
           <h3>Address</h3>
              <section>

            <label for="street_address"> Street Address:<span>*</span></label>
            <input id="streetAddress" type="text" name="street_address" />
                
            <label for="province">Province<span>*</span></label>
            <input id="province" type="text" name="province" />
          
          
            <label for="city">City<span>*</span></label>
            <input id="city" type="text" name="city" />
         
           
             <label for="zip_code">ZIP Code<span>*</span></label>
            <input id="zip_code" type="text" name="zip_code"/>
        
          <label>What type of area is this?<span>*</span></label>
           <select id = "locationType">
              <option selected value="" disabled selected></option>
                  <option value="Dense Urban" >Dense Urban</option>
                  <option value="Urban">Urban</option>
                  <option value="Rural">Rural</option>
              </select>
            
                  </section>
                
               
            
            <h3>Client Info</h3>
          <section>
            <label for="first_name"> First name<span>*</span></label>
            <input id="first_name" type="text" name="first_name" />
          
          
            <label for="last_name">last name<span>*</span></label>
            <input id="last_name" type="text" name="last_name" />
          
         
            <label for="birthday">Birthday<span>*</span></label>
            <input id="birthday" type="text" name="birthday" />
          
              </section>
                <!--
                  <h3>Policy Type</h3>
                <section> 
           <select id = "policyType">
               <option value="Auto">Auto</option>
               <option value="Home">Home</option>
              </select>
                </section>
                              
                       <h3>Accident Listing</h3>
<section>            
    <label for="accident_date"> Accident date<span>*</span></label>
            <input id="accident_date" type="text" name="accident_date" />
            <label for="atFault">Were you at fault for this accident?<span>*</span></label>
            <input id="atFault" type="text" name="atFault" />
              </section>            
                                          
              
                

                      <h3>Vehicle Details</h3>
                    <section> 
          <div class="item">
            <label for="vehicle_make"> Vehicle Make<span>*</span></label>
            <input id="vehicle_make" type="text" name="vehicle_make" />
          </div>
          <div class="item">
            <label for="vehicleModel">Vehicle Model<span>*</span></label>
            <input id="vehicleModel" type="text" name="vehicleModel" />
          </div>
               <div class="item">
            <label for="vehicleYear">Vehicle Year<span>*</span></label>
            <input id="vehicleYear" type="text" name="vehicleYear" />
          </div>
                            </section>

            
              
                      <h3>Home Details</h3>
                        <section> 
            <label for="homeYear"> Date house was built<span>*</span></label>
            <input id="homeYear" type="text" name="homeYear" />
            <label for="typeOfDwelling"> What type of house is it?<span>*</span></label>
             <select id = "typeOfDwelling">
              <option selected value="" disabled selected></option>
                  <option value="Semi-Attached" >Semi-Attached</option>
                  <option value="Apartment">Apartment</option>
                <option value="Bungalow">Bungalow</option>
                <option value="SingleDwelling">Single Dwelling</option>
              </select>
            <label for="heatingType"> What type of Heating does it have?<span>*</span></label>

             <select id = "heatingType">
              <option selected value="" disabled selected></option>
                  <option value="Electric" >Electric</option>
                  <option value="Oil">Oil</option>
                <option value="Wood">Wood</option>
                <option value="Gas">Gas</option>
                <option value="Other">Other</option>
              </select>
                      </section>   
            -->
              </div> 

     
     
           
<!--
                 
         <div>
<span id="result"></span>
          <button type="calc" id="calc1"  onclick="fire_ajax_submit_address()">Calculate</button> 
        </div>
-->
              </fieldset> 
        <br/>
          
          
          
          
          
          
          


          
          
     
        <div class="btn-block">
          <button type="submit" href="/">Submit</button>
        </div>
      </form>
        
    </div>
        
        

      
            
      

                  
 
      </body>

      </html>
        
      <script>
          
var form = $("#wizard");

form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
   },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
       return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
       var policyType= $('#policyType').val();

        fire_ajax_submit_address();
        fire_ajax_submit_client();
        window.location.href = "/dashboard.html";

        // fire_ajax_policy_type();
       // if (policyType == 'Auto') {
        //    fire_ajax_submit_accident_listing();

       //     fire_ajax_submit_car();
        //    fire_ajax_car_policy();
      //  }

      //  else if (policyType == 'Home'){
      //      fire_ajax_submit_home();
      //      fire_ajax_home_policy();
      //  }


     //    fire_ajax_policy_holder();
    }
});

          
          
            $(document).ready(function() {
                // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
    $("#myModal").css("z-index", "1500");

}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
             
          });
          
          
          
          $("#registerButton").click(function(event){

        //stop submit the form, we will get it manually.
        event.preventDefault();
        fireAccountRegistration();
    });
          
          
          
          
           $("#calc1").click(function(event){

        //stop submit the form, we will get it manually.
        event.preventDefault();
     //   fire_ajax_submit_address();
    });
          
          function fireAccountRegistration(){
              var username = $("#username").val();
              var password = $("#password").val();                 
                 var usernamePassword = {
                  username: username,
                  password: password,
              }               
            var accountData = JSON.stringify(usernamePassword);
           //   console.log(usernamePassword);  
              $.ajax({
    type: 'POST',
    url: 'http://localhost:8080/api/user',
    data: accountData, 
    success: function(){
           //     $('#message2').text('bananana');    
    },
    error: function(){
                        $('#message').text('Account creation Successful. You can now Log in.');    

    },
    
    contentType: "application/json",
    dataType: 'json'
});
              
          
          };
          
          
          
          function fire_ajax_submit_address() {

              
    var streetAddress = $("#streetAddress").val();
    var province = $("#province").val();
    var city = $("#city").val();
    var zip_code = $("#zip_code").val();
    var locationType = $("#locationType option:selected").text();
              var addressData = {
                  street_address: streetAddress,
                  province: province,
                  city: city,
                  zip_code: zip_code,
                  location_type: locationType
              }
       
    var jsonAddressData = JSON.stringify(addressData);
     
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "http://localhost:8080/api/address",
        dataType: 'json',
        contentType: 'application/json',
        data: jsonAddressData,   
        cache: false,
        timeout: 600000,
        success: function (data) { 
            console.log(data);          
            $("#result1").text(data);
        },
        error: function (e) {
            
            //  console.log( e );


          //  var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
         //       + e.responseText + "&lt;/pre&gt;";
          //  $('#feedback').html(json);

          //  console.log("ERROR : ", e);
          //  $("#btn-search").prop("disabled", false);

        }
    });
}
          
          
          
                 function fire_ajax_submit_client() {

              
    var first_name = $("#first_name").val();
    var last_name = $("#last_name").val();
    var birthday = $("#birthday").val();
              var clientData = {
                  main_insured_first_name: first_name,
                  main_insured_last_name: last_name,
                  client_birthday: birthday,
              }
       
    var jsonClientData = JSON.stringify(clientData);
     
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "http://localhost:8080/api/client",
        dataType: 'json',
        contentType: 'application/json',
        data: jsonClientData,   
        cache: false,
        timeout: 600000,
        success: function (data) { 
            console.log(data);          
            $("#result1").text(data);
        },
        error: function (e) {
            
            //  console.log( e );


          //  var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
         //       + e.responseText + "&lt;/pre&gt;";
          //  $('#feedback').html(json);

          //  console.log("ERROR : ", e);
          //  $("#btn-search").prop("disabled", false);

        }
    });
}
          
          
          
          function fire_ajax_submit_accident_listing(){
              
              var accidentDate = $("#accident_date").val();
    var atFault = $("#atFault").val();
              var accidentData = {
                  accident_date: accidentDate,
                  at_fault: atFault,
              }
       
    var jsonaccidentData = JSON.stringify(accidentData);
     
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "http://localhost:8080/api/accident_listing",
        dataType: 'json',
        contentType: 'application/json',
        data: jsonaccidentData,   
        cache: false,
        timeout: 600000,
        success: function (data) { 
            console.log(data);          
            $("#result1").text(data);
        },
        error: function (e) {
            
            //  console.log( e );


          //  var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
         //       + e.responseText + "&lt;/pre&gt;";
          //  $('#feedback').html(json);

          //  console.log("ERROR : ", e);
          //  $("#btn-search").prop("disabled", false);

        }
    });
              
              
          }
             function fire_ajax_policy_type(){
              
              var policyType = $("#policyType").val();
              var policyTypeData = {
                  policy_type: policyType,
              }
       
    var jsonPolicyTypeData = JSON.stringify(policyTypeData);
     
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "http://localhost:8080/api/policy",
        dataType: 'json',
        contentType: 'application/json',
        data: jsonPolicyTypeData,   
        cache: false,
        timeout: 600000,
        success: function (data) { 
            console.log(data);          
        },
        error: function (e) {


            //  console.log( e );


          //  var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
         //       + e.responseText + "&lt;/pre&gt;";
          //  $('#feedback').html(json);

          //  console.log("ERROR : ", e);
          //  $("#btn-search").prop("disabled", false);

        }
    });
          }
                function fire_ajax_submit_car(){
              
              var vehicle_make = $("#vehicle_make").val();
              var vehicle_model = $("#vehicleModel").val();
              var vehicle_year = $("#vehicleYear").val();

              var carData = {
                  vehicle_make: vehicle_make,
                  vehicle_model: vehicle_model,
                  vehicle_year: vehicle_year
              }
       
    var jsoncarData = JSON.stringify(carData);
     
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "http://localhost:8080/api/car",
        dataType: 'json',
        contentType: 'application/json',
        data: jsoncarData,   
        cache: false,
        timeout: 600000,
        success: function (data) { 
            console.log(data);          
            $("#result1").text(data);
        },
        error: function (e) {
            
            //  console.log( e );


          //  var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
         //       + e.responseText + "&lt;/pre&gt;";
          //  $('#feedback').html(json);

          //  console.log("ERROR : ", e);
          //  $("#btn-search").prop("disabled", false);

        }
    });
          }
           function fire_ajax_submit_home(){


              var date_built = $("#homeYear").val();
              var type_of_dwelling = $("#typeOfDwelling option:selected").text().trim();
              var heating_type = $("#heatingType option:selected").text().trim();
              var homeData = {
                  date_built: date_built,
                  type_of_dwelling: type_of_dwelling,
                  heating_type: heating_type
              }

    var jsonhomeData = JSON.stringify(homeData);

    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "http://localhost:8080/api/home",
        dataType: 'json',
        contentType: 'application/json',
        data: jsonhomeData,
        cache: false,
        timeout: 600000,
        success: function (data) {
            console.log(data);
            $("#result1").text(data);
        },
        error: function (e) {

            //  console.log( e );


          //  var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
         //       + e.responseText + "&lt;/pre&gt;";
          //  $('#feedback').html(json);

          //  console.log("ERROR : ", e);
          //  $("#btn-search").prop("disabled", false);

        }
    });
            
               

              
          }


function fire_ajax_home_policy(){
    $.post("http://localhost:8080/api/home_policy");
}

function fire_ajax_car_policy(){
    $.post("http://localhost:8080/api/auto_policy");
}

function fire_ajax_policy_holder(){
    $.post("http://localhost:8080/api/policy_holder");
}
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
      
          
            
            
      </script>
  
       
